<template>
  <div class="div1">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">文档名称：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servName }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">可见方式：</span>
          </el-col>
          <el-col :span="21">
            <span v-if="item.servLimit == 1" class="sn2">公开</span>
            <span v-if="item.servLimit == 2" class="sn2">条件公开</span>
            <span v-if="item.servLimit == 3" class="sn2">线下</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">文档地址：</span>
          </el-col>
          <el-col :span="21">
            <a :href="item.servUrl" target="_blank">{{ item.servUrl }}</a>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">发布时间：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servDate ? item.servDate.substring(0, 10) : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">发布单位：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servUnit }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">发布地址：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servAddress }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">联系人：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servUser }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">联系电话：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servPhone }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">联系人邮箱：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servEmail }}</span>
          </el-col>
        </el-row>
        <el-row class="er1">
          <el-col :span="3">
            <span class="sn2">关键字：</span>
          </el-col>
          <el-col :span="21">
            <span class="sn2">{{ item.servKeyword }}</span>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="文档内容" name="second">
        <pdf
            :key="i"
            :page="i"
            v-for="i in numPages"
            :src="loadingTask">
        </pdf>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: "FileDetails",
  components: {
    pdf
  },
  data() {
    return {
      loadingTask: undefined,
      numPages: undefined,
      item: {},
      activeName: 'first',
    }
  },
  mounted() {
    let servId = this.$route.query.servId;
    if (!window.sessionStorage.getItem("serviceDetails" + servId)) {
      this.item = this.$route.query.item
      window.sessionStorage.setItem("serviceDetails" + servId, this.$XEUtils.toJSONString(this.$route.query.item))
    } else {
      this.item = this.$XEUtils.toStringJSON(window.sessionStorage.getItem("serviceDetails" + servId))
    }

    if(this.item.servApi && this.item.servApi !==  ''){
      setTimeout(() => {
        this.loadingTask = pdf.createLoadingTask(this.item.servApi);
        this.loadingTask.promise.then(pdf => {
          this.numPages = pdf.numPages;
        });
      }, 500)
    }
  }
}
</script>

<style scoped>
.div1 {
  width: 60%;
  margin-left: 20%;
  background-color: #ffffff;
  padding: 20px 20px 20px 20px;
}

.er1 {
  font-size: 16px;
  margin-top: 20px;
}
</style>
